<template>
  <div class="contact-page">
    <!-- 顶部标题区域 -->
    <div class="page-header">
      <h1><i class="el-icon-connection"></i> 联系我们</h1>
      <p class="subtitle">了解我们的技术栈与开发故事</p>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧卡片：开发人员信息 -->
      <el-card class="developer-card">
        <div class="developer-header">
          <!-- <el-avatar :size="100" :src="developer.avatar" class="developer-avatar"></el-avatar> -->
            <el-image 
              :src="require('@/assets/images'+developer.avatar)" 
              alt="头像" 
              fit="contain"
              class="developer-avatar"
            ></el-image>
          <div class="developer-info">
            <h2>{{ developer.name }}</h2>
            <p class="role">{{ developer.role }}</p>
            <div class="stats">
              <el-tag type="info" size="small">
                <i class="el-icon-time"></i> {{ developer.duration }}
              </el-tag>
              <el-tag type="success" size="small">
                <i class="el-icon-collection-tag"></i> {{ developer.status }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <div class="developer-desc">
          <p>{{ developer.description }}</p>
        </div>
        
        <div class="skills">
          <h3>核心技能</h3>
          <div class="skill-badges">
            <el-tag v-for="(skill, index) in developer.skills" :key="index" 
                    type="success" effect="dark" size="small">
              {{ skill }}
            </el-tag>
          </div>
          <!-- 添加跳转按钮 -->
          <div class="upload-button-container" style="margin: 20px 0;">
            <el-button 
              type="primary" 
              icon="el-icon-upload" 
              @click="$router.push('/upload')"
              style="width: 100%;"
            >
              点击前往下载本项目代码
            </el-button>
          </div>
          <div>你看了项目是吧！！<br>那就......</div>
          
          <div class="donation-images">
            <el-image 
              :src="require('@/assets/images/other/给点饭吃吧.gif')" 
              alt="给点饭吃吧" 
              fit="contain"
              class="donation-image"
            ></el-image>
            <el-image 
              :src="require('@/assets/images/other/可怜.jpg')" 
              alt="可怜" 
              fit="contain"
              class="donation-image"
            ></el-image>
            <el-image 
              :src="require('@/assets/images/other/给点饭吃吧.gif')" 
              alt="给点饭吃吧" 
              fit="contain"
              class="donation-image"
            ></el-image>
            <el-image 
              :src="require('@/assets/images/other/求打赏.jpg')" 
              alt="求打赏" 
              fit="contain"
              class="donation-image"
            ></el-image>
          </div>
        </div>
      </el-card>

      <!-- 右侧技术栈展示 -->
      <div class="tech-section">
        <!-- 前端技术栈 -->
        <el-card class="tech-card">
          <div slot="header" class="tech-header">
            <i class="el-icon-monitor"></i>
            <span>前端技术栈</span>
          </div>
          <div class="tech-list">
            <div v-for="(tech, index) in frontendTech" :key="'front-'+index" class="tech-item">
              <div class="tech-icon">
                <i :class="tech.icon" :style="{color: tech.color}"></i>
              </div>
              <div class="tech-details">
                <h4>{{ tech.name }}</h4>
                <p>{{ tech.description }}</p>
                <span class="tech-version">{{ tech.version }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 后端技术栈 -->
        <el-card class="tech-card">
          <div slot="header" class="tech-header">
            <i class="el-icon-cpu"></i>
            <span>后端技术栈</span>
          </div>
          <div class="tech-list">
            <div v-for="(tech, index) in backendTech" :key="'back-'+index" class="tech-item">
              <div class="tech-icon">
                <i :class="tech.icon" :style="{color: tech.color}"></i>
              </div>
              <div class="tech-details">
                <h4>{{ tech.name }}</h4>
                <p>{{ tech.description }}</p>
                <span class="tech-version">{{ tech.version }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 时间线展示开发历程 -->
    <!-- <div class="timeline-section">
      <h2><i class="el-icon-time"></i> 开发历程</h2>
      <el-timeline>
        <el-timeline-item
          v-for="(milestone, index) in milestones"
          :key="index"
          :timestamp="milestone.date"
          placement="top"
          :color="milestone.color"
        >
          <el-card>
            <h4>{{ milestone.title }}</h4>
            <p>{{ milestone.description }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div> -->

    <!-- 底部联系信息 -->
    <div class="footer-contact">
      <div class="contact-info">
        <h3><i class="el-icon-chat-dot-round"></i> 有问题想联系我们？</h3>
        <p>邮箱: 3215763265@qq.com</p>
        <p>电话: (86) 123-4567-8910</p>
      </div>
      <div class="qr-code">
        <div class="qr-placeholder">
          </div>
          作者QQ
           <el-image 
              :src="require('@/assets/images/other/QQ.png')" 
              alt="qq" 
              fit="contain"
              class="developer-avatar"
            ></el-image>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'ContactPage',
  data() {
    return {
      // 开发人员信息
      developer: {
        name: '十八',
        role: '开发新手小白',
        avatar: '/other/picture.png', 
        duration: '开发周期: 1个月',
        status: '新手开发',
        description: '软件工程专业大三学生，热爱Web开发技术，这是第一次独立完成完整项目。在开发过程中遇到了许多挑战，但也学到了很多宝贵的经验。',
        skills: ['Vue.js', 'Element UI', 'Spring Boot', 'MySQL', 'RESTful API']
      },
      
      // 前端技术栈数据
      frontendTech: [
        {
          name: 'Vue.js',
          description: '用于构建用户界面的渐进式框架',
          version: '2.6.14',
          icon: 'el-icon-data-line',
          color: '#42b983'
        },
        {
          name: 'Element UI',
          description: '基于Vue的桌面端组件库',
          version: '2.15.14',
          icon: 'el-icon-menu',
          color: '#409EFF'
        },
        {
          name: 'Vue Router',
          description: 'Vue.js官方的路由管理器',
          version: '3.5.3',
          icon: 'el-icon-share',
          color: '#42b983'
        },
        {
          name: 'Vuex',
          description: 'Vue.js应用程序的状态管理模式',
          version: '3.6.2',
          icon: 'el-icon-s-operation',
          color: '#42b983'
        },
        {
          name: 'Axios',
          description: '基于Promise的HTTP客户端',
          version: '1.6.2',
          icon: 'el-icon-link',
          color: '#5a45ff'
        }
      ],
      
      // 后端技术栈数据
      backendTech: [
        {
          name: 'Spring Boot',
          description: '简化Java开发的框架',
          version: '3.5.3',
          icon: 'el-icon-coffee-cup',
          color: '#6DB33F'
        },
        {
          name: 'MySQL',
          description: '关系型数据库管理系统',
          version: '9.0.1',
          icon: 'el-icon-s-data',
          color: '#00758F'
        },
        {
          name: 'MyBatis',
          description: '持久层框架',
          version: '3.5.7',
          icon: 'el-icon-s-management',
          color: '#6DB33F'
        },
        {
          name: 'RESTful API',
          description: '接口设计规范',
          version: '',
          icon: 'el-icon-s-promotion',
          color: '#5a45ff'
        }
      ],
      
      // 开发历程时间线
      // milestones: [
      //   {
      //     date: '2025-07-01',
      //     title: '项目启动',
      //     description: '完成需求分析和技术选型，确定使用Vue+Spring Boot技术栈',
      //     color: '#0bbd87'
      //   },
      //   {
      //     date: '2025-07-10',
      //     title: '前端框架搭建',
      //     description: '完成Vue项目初始化，集成Element UI和Vue Router',
      //     color: '#e6a23c'
      //   },
      //   {
      //     date: '2025-07-18',
      //     title: '后端服务开发',
      //     description: '完成Spring Boot项目搭建，设计数据库模型',
      //     color: '#e6a23c'
      //   },
      //   {
      //     date: '2025-07-25',
      //     title: '前后端联调',
      //     description: '实现前后端数据交互，完成核心功能开发',
      //     color: '#e6a23c'
      //   },
      //   {
      //     date: '2025-07-30',
      //     title: '项目测试',
      //     description: '完成系统测试和bug修复',
      //     color: '#f56c6c'
      //   },
      //   {
      //     date: '2025-08-01',
      //     title: '项目上线',
      //     description: '系统部署到生产环境',
      //     color: '#0bbd87'
      //   }
      // ]
    };
  }
};
</script>

<style scoped>
.contact-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

/* 顶部标题样式 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 0;
  background: linear-gradient(135deg, #409EFF, #42b983);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.page-header .subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 主要内容布局 */
.main-content {
  display: flex;
  gap: 25px;
  margin-bottom: 40px;
}

/* 开发人员卡片样式 */
.developer-card {
  flex: 1;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.developer-card:hover {
  transform: translateY(-5px);
}

.developer-header {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.developer-avatar {
  background-color: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
}

.developer-info {
  margin-left: 20px;
}

.developer-info h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #303133;
}

.role {
  color: #606266;
  margin: 5px 0 10px;
}

.stats {
  display: flex;
  gap: 10px;
}

.developer-desc {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 25px;
  padding: 0 10px;
}

.skills h3 {
  margin-top: 0;
  color: #409EFF;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* 技术栈卡片样式 */
.tech-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.tech-card {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.tech-card:hover {
  transform: translateY(-5px);
}

.tech-header {
  font-size: 1.3rem;
  font-weight: bold;
  color: #303133;
  display: flex;
  align-items: center;
}

.tech-header i {
  margin-right: 10px;
  font-size: 1.5rem;
}

.tech-list {
  padding: 10px;
}

.tech-item {
  display: flex;
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.tech-item:hover {
  background-color: #f5f7fa;
  border-radius: 8px;
}

.tech-item:last-child {
  border-bottom: none;
}

.tech-icon i {
  font-size: 2.2rem;
  margin-right: 15px;
}

.tech-details {
  flex: 1;
}

.tech-details h4 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.tech-details p {
  margin: 0 0 8px;
  color: #606266;
  font-size: 0.95rem;
}

.tech-version {
  display: inline-block;
  background-color: #f0f9eb;
  color: #67c23a;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* 时间线部分 */
.timeline-section {
  margin: 50px 0;
  padding: 25px;
  background-color: #f5f7fa;
  border-radius: 12px;
}

.timeline-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-section h2 i {
  margin-right: 10px;
}

.el-timeline {
  padding-left: 20px;
}

/* 底部联系信息 */
.footer-contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background: linear-gradient(135deg, #f5f7fa, #e4e7ed);
  border-radius: 12px;
  margin-top: 40px;
}

.contact-info {
  flex: 1;
}

.contact-info h3 {
  display: flex;
  align-items: center;
  color: #409EFF;
}

.contact-info h3 i {
  margin-right: 10px;
}

.contact-info p {
  margin: 10px 0;
  font-size: 1.1rem;
}

.qr-code {
  width: 150px;
  height: 150px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-placeholder {
  text-align: center;
  color: #909399;
}

.qr-placeholder i {
  font-size: 3rem;
  margin-bottom: 10px;
}

/* 响应式布局 */
@media (max-width: 900px) {
  .main-content {
    flex-direction: column;
  }
  
  .footer-contact {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .contact-info h3 {
    justify-content: center;
  }

  /* 打赏图片样式 */
  .donation-images {
    display: flex;
    gap: 20px; /* 图片之间的间距 */
    justify-content: center; /* 图片居中显示 */
    margin: 20px 0; /* 上下外边距 */
  }

  .donation-image {
    width: 120px; /* 固定宽度 */
    height: 120px; /* 固定高度 */
    border-radius: 8px; /* 轻微圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影增加立体感 */
    transition: transform 0.3s ease; /* 鼠标悬停效果 */
  }

  .donation-image:hover {
    transform: scale(1.05); /* 鼠标悬停时轻微放大 */
}
}
</style>